<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="5" :offset="7" class="titleName"><h2>Answerer信息修改</h2>   </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="3"></el-col>
      <el-col :span="4" class="titleName">姓名</el-col>
      <el-col :span="10">
        <el-input type="text" placeholder="input you username " v-model="form.name" maxlength="10" show-word-limit></el-input>
      </el-col>
    </el-row>
    <el-row><br></el-row>

    <el-row><br></el-row>
    <el-row :gutter="20">
      <el-col :span="3"></el-col>
      <el-col :span="4" class="titleName">email</el-col>
      <el-col :span="10">
        <el-input type="email" placeholder="xxxx@xx.com " v-model="form.email" maxlength="10" show-word-limit></el-input>
      </el-col>
    </el-row>
    <el-row><br></el-row>

    <el-row><br></el-row>
    <el-row :gutter="20">
      <el-col :span="3"></el-col>
      <el-col :span="4" class="titleName">类别</el-col>
      <el-col :span="10">
        <!-- <el-input type="email" placeholder="xxxx@xx.com " v-model="form.classify" maxlength="10" show-word-limit></el-input> -->
        <el-select v-model="form.classify" placeholder="请选择">
          <el-option
            v-for="item in classifys"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-col>
    </el-row>
    <el-row><br></el-row>

    <el-row><br></el-row>
    <el-row :gutter="20">
      <el-col :span="3"></el-col>
      <el-col :span="4" class="titleName">age</el-col>
      <el-col :span="10">
    <el-input-number v-model="form.age"  :min="0" :max="99" label="age"></el-input-number>
      </el-col>
    </el-row>
    <el-row><br></el-row>
    <!-- <el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number> -->

    <el-row :gutter="20">
      <el-col :span="3"></el-col>
      <el-col :span="4" class="titleName" style="padding-top: 6%;">头像添加</el-col>
      <el-col :span="10">
        <el-card>
          <el-upload class="avatar-uploader" :action="this.MYURL+`/answerer/addHead`" :show-file-list="false"
            :on-success="handleAvatarSuccess" :on-remove="handleRemove" :before-upload="beforeAvatarUpload">
            <el-image v-if="imageUrl" style="width: 100px; height: 100px" :src="imageUrl" fit="contain">
            </el-image> 
            <br>
            <el-button type="primary" v-if="imageUrl" >上传<i
                class="el-icon-upload el-icon--right"></i></el-button>
            <i v-else class="el-icon-upload2 avatar-uploader-icon" stop></i>

          </el-upload>
        </el-card>
      </el-col>
    </el-row>

    
    <!-- submit 的 @click.prevent 防止刷新 -->
    <el-row :gutter="20">
      <!-- <el-col :span="5"></el-col> -->
      <el-col :span="5" :offset="7" class="titleName" style="padding-top: 6%;">     
         <el-button size="medium" type="info" plain round @click.prevent="submitFrom" >提交</el-button>
      </el-col>
    </el-row>
  
  </div>
</template>
<script>

/* 
fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
*/
import qs from "qs"
  export default {
    name: "updateA",
    data() {
      return {
        imageUrl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        text: '',
        form:{
            username:"222",
            age:"18",
            email:"",
            classify:"类别无",
        },
        classifys:[{
          value: '类别无',
          label: '类别无'
        }, {
          value: '娱乐',
          label: '娱乐'
        }, {
          value: '情感',
          label: '情感'
        }, {
          value: '美食',
          label: '美食'
        }, {
          value: 'other',
          label: 'other'
        }]
      }
    },
    mounted() {
      this.getFormData()
    },
    computed: {},
    methods: {
      // 默认表格信息
      getFormData(){
        let userData=JSON.parse(localStorage.getItem("userData")) 
      this.form=userData
      this.form.name=this.form.username
      this.form.username=""
      this.form.id=this.form.userId
      this.form.userId=""
      console.log(this.form)
      },


      // 移除图片
      handleRemove() {
        this.imageUrl = ''
      },

      // 上传成功回调
      handleAvatarSuccess(res, file) {
        console.log(file.type)
        this.imageUrl = res
        this.form.head=res
        // this.$cookies.set("headImg",res,{    expires: new Date(new Date().getTime() +  60 * 1000)})
      },
      // 上传前格式和图片大小限制
      beforeAvatarUpload(file) {
        this.form.head=file.name
        console.log("headAAA:",this.form.head)

        const type = file.type === 'image/jpeg' || 'image/jpg' || 'image/webp' || 'image/png'
        const isLt2M = file.size / 1024 / 1024 < 3
        if (!type) {
          this.$message.error('图片格式不正确!(只能包含jpg，png，webp，JPEG)')
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 3MB!')
        }
        return type && isLt2M
      }
      ,
      submitFrom(){
      console.log(this.form)
           this.$axios.post(this.MYURL+"/login/updateAnswerer",qs.stringify(this.form))
          .then(res => {
                      this.$cookies.set("username",this.form.username)
                      console.log("Submitres:",res)
                    }
                    )
                    .catch(function (error) { alert("请求失败" + error) })
    }
  
    },
    
    // 提交表单
    

  }


</script>
<style scoped>
  .titleName {
    padding-top: 1%;
  }
</style>